<!--  -->
<template>
  <div class="relative">
    <div
      class="ml-32 w-[512px] h-[512px] bg-center bg-cover relative link-bg rounded-sm"
      :style="{ backgroundImage: 'url(' + bg + ')' }"
    >
      <div
        class="absolute bottom-1/3 -left-10 bg-[#743b32] px-16 text-4xl py-2 leading-9 rounded-sm"
      >
        {{ user }}
      </div>
      <div
        class="absolute bottom-5 -right-44 bg-[#743b32] px-16 text-2xl py-2 leading-9 tracking-[.5rem] rounded-sm"
      >
        {{ course }}
      </div>
    </div>
    <div class="ml-28 mt-5">{{ desc }}</div>
    <div class="ml-24 mt-3 text-5xl flex mb-24">
      {{ title }}
      <div
        class="relative ml-3 aspect-square bg-[url(@/components/icons/head.jpg)] w-28 rounded-full bg-cover outline outline-offset-4 outline-1"
      >
        <div class="absolute flex -bottom-8 right-8 justify-end w-52" style="font-size: 1rem">
          主客老师：
          <span class="ml-10">{{ user }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  title?: string
  desc?: string
  bg?: string
  user?: string
  course?: string
}
withDefaults(defineProps<Props>(), {
  title: 'PS+AI零基础特效速成班',
  desc: '通过PS和AI软件，帮助你在十分钟内快速制作出合理，精准，写实的特效',
  bg: new URL('../../assets/img/viewImg/pic006.png', import.meta.url).href,
  user: '夏三七',
  course: '特效速成班'
})
</script>
<style scoped>
/* @import url(); 引入css类 */
.link-bg {
  box-shadow: 0 10px 30px #000000c9;
}
</style>
